<template>
  <div>
    <!-- asdhjadhksahdksakjhdhkj -->
    <!-- 复制弹出层 -->
    <el-dialog title="选择数据库" class="database-setting-user-dialog" center :visible.sync="isSlect" append-to-body @close="closeDialog">
      <div style="height:300px" class="overflow-y">
        <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange"><span style="margin-left:10px">全选</span></el-checkbox>
        <div style="margin: 15px 0;" />
        <el-checkbox-group v-model="checkedCities" style="display: flex; flex-wrap: wrap;">
          <!-- <div v-for="database in childDatabaseList" :key="database.id">
            <div style="width:120px;height:80px;margin-right:20px;margin-bottom: 20px;" class="database_box_show pointer " @click="checkbox(database.database_id)">
              <img :src="image" alt="" style="height:59px;width:119px">
              <div style="width:100px"><el-checkbox :label="database.database_id" style="margin-left:5px" @change="checkbox(database.database_id)"><div style="width:80px; margin-left:10px ;" class="text_overflow"><span>{{ database.database_name }}</span> </div></el-checkbox></div>
            </div>
          </div> -->
          <!-- <el-checkbox v-for="city in cities" :key="city" :label="city">{{ city }}</el-checkbox> -->
          <div v-for="city in newChildDbInfo" :key="city.id">
            <div style="width:120px;height:80px;margin-right:20px;margin-bottom: 20px;" class="database_box_show pointer ">
              <img :src="image" alt="" style="height:59px;width:119px">
              <div style="width:100px">
                <el-checkbox :label="city" style="margin-left:5px" @change="ChildDbInfo(city)">
                  <div style="width:80px; margin-left:10px ;" class="text_overflow">
                    <span>{{ city.database_name }}</span>
                  </div>
                </el-checkbox></div>
            </div>
          </div>
        </el-checkbox-group>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click.native.prevent="define">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 复制病例接口
import { copyUser } from '@/api/case'
export default {
  name: 'DatabaseSelect',
  props: {
    isSelectDatabase: { type: Boolean, default: false },
    newChildDbInfo: { type: Array, default: () => [] }, // 这里就是需要渲染的子库
    newUser: { type: Array, default: () => [] }, // 这个就是选中的用户
    newDifferentiate: { type: Boolean, default: false }
  },
  data() {
    return {
      isSlect: this.isSelectDatabase, // 控制弹框
      checkAll: false,
      checkedCities: [],
      isIndeterminate: false,
      image: require('@/assets/images/imge/database_2.png')
    }
  },
  watch: {
    isSelectDatabase() {
      this.isSlect = this.isSelectDatabase
    }
  },

  methods: {
    // 点击其中一个
    ChildDbInfo(e) {
      console.log('eeeeeeee', e, this.checkedCities)
      const checkedCount = this.checkedCities.length
      this.checkAll = checkedCount === this.newChildDbInfo.length
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.newChildDbInfo.length
      // this.isIndeterminate = !this.isIndeterminate
    },
    // 关闭弹框
    closeDialog() {
      // 重置选框属性
      this.checkAll = false
      this.checkedCities = []
      this.isIndeterminate = false
      // 给父组件传递信息
      this.$emit('sendIsSelectDatabase', false)
    },
    handleCheckAllChange(val) {
      this.checkedCities = val ? this.newChildDbInfo : []
      this.$forceUpdate()
      this.isIndeterminate = false
    },
    // 确定提交
    async define() {
      console.log(' this.checkedCities', this.checkedCities)
      if (this.checkedCities.length === 0) {
        return this.$message.error('请选择复制的子库')
      }
      // 拿数据
      // target_db就是选中的子库的id
      const target_db = this.checkedCities.map((item) => {
        return item.id
      })
      // 先判断用户是通过什么确定
      if (this.newDifferentiate) {
        console.log('这里就是一键复制')
        const data = { database_id: this.$store.getters.database_id, target_db, origin_user: '', copy_type: '2', search: '' }
        await copyUser(data)
      } else {
        console.log('这里就是用户选中复制病例信息的')
        const origin_user = this.newUser.map((item) => {
          return { user_id: item.id, user_number: item.user_number }
        })
        console.log(target_db, this.newUser, origin_user)
        const data = { database_id: this.$store.getters.database_id, target_db, origin_user, copy_type: '1', search: '' }
        await copyUser(data)
      }
      // 给出提示
      await this.$message.success('复制成功')
      // 关闭弹窗
      this.closeDialog()
    }
  }
}
</script>

<style lang='scss' scoped>
.database_box_show{
box-shadow: 2px 2px 2px #efefef;
}
.overflow-y{
      overflow-y: auto;
}
.pointer {
  cursor: pointer;
}
.text_overflow{
    white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
::v-deep .el-checkbox__input{
position: absolute;
    top: 3px;
    left: 3px;

}

</style>
